{% extends 'base.html' %}

{% block content %}
<!-- Carrossel -->
<div class="carousel-container">
    <div class="carousel">
        <img src="{{ url_for('static', filename='../../../app/static/images/promocoes/promo1.jpeg') }}" class="slide" alt="Promoção 1">
        <img src="{{ url_for('static', filename='../../../app/static/images/promocoes/promo2.jpeg') }}" class="slide" alt="Promoção 2">
        <img src="{{ url_for('static', filename='../../../app/static/images/promocoes/promo3.jpeg') }}" class="slide" alt="Promoção 3">
    </div>
    <button class="prev" onclick="prevSlide()">❮</button>
    <button class="next" onclick="nextSlide()">❯</button>

    <!-- Indicadores -->
    <div class="carousel-indicators">
        <span class="indicator" data-slide="0"></span>
        <span class="indicator" data-slide="1"></span>
        <span class="indicator" data-slide="2"></span>
    </div>
</div>

<!-- Barra de Pesquisa -->
<div class="nav-search-bar">
    <button id="categoriasbutton" class="squishy squishy-candy dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
        Categorias
    </button>
    <div class="dropdown-menu" aria-labelledby="categoriasbutton">
        <a class="dropdown-item" href="#">Categoria 1</a>
        <a class="dropdown-item" href="#">Categoria 2</a>
        <a class="dropdown-item" href="#">Categoria 3</a>
        <a class="dropdown-item" href="#">Categoria 4</a>
    </div>
    <input type="text" id="searchInput" placeholder="Buscar..." onkeyup="searchFunction()">
</div>

<!-- Cards de Produtos -->
<div class="container mt-5">
    <div class="row">
        {% for product in promo_products %}
            <div class="col-md-3 mb-4">
                <div class="product-card">
                    <img src="{{ url_for('static', filename='images/products/' + product.image) }}" class="card-img-top" alt="{{ product.name }}">
                    <div class="card-body">
                        <h5 class="card-title">{{ product.name }}</h5>
                        <p class="card-text">{{ product.description }}</p>
                        <a href="{{ url_for('main.product_details', product_id=product.id) }}" class="squishy squishy-neon">Ver Detalhes</a>
                    </div>
                </div>
            </div>
        {% endfor %}
    </div>
</div>

<script src="{{ url_for('static', filename='js/script.js') }}"></script>
{% endblock %}